<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">库存清单</h3>
      </div>
      <div class="box-body">
        <div class="form-horizontal">
          <div class="clearfix row">
            <div class="col-sm-12 flex" style="align-items: initial">
              <label class="min-width bg-gray control-label">仓库位置：</label>
              <div class="inline-block">
                <div class="m-b-20" v-if="userPrivilegeStock.length == 0">
                  <label class="payment">
                    <i class="fa fa-warning"></i>
                    您当前还未添加仓库
                    <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                  </label>
                </div>
                <div v-else>
                  <button type="button"
                          class="btn btn-default btn-flat m-r-10 m-b-20" :class='[{ "btn-info" :-1==whLocationActive}]'
                          @click="whLocationInquire(null,-1)">全部
                  </button>
                  <button type="button" v-for="(userPrivilegeStockItem,index) in userPrivilegeStock"
                          class="btn btn-default btn-flat m-r-10 m-b-20"
                          :class='[{ "btn-info" :index==whLocationActive}]'
                          @click="whLocationInquire(userPrivilegeStockItem.id,index)">{{userPrivilegeStockItem.name}}
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 flex">
              <label class="min-width bg-gray control-label">输入搜索：</label>

              <div class="inline-block">
                <input style="width: 350px" type="text" v-model.trim="whLocationInquireCriteria.goodsCN"
                       class="form-control pull-left" placeholder="商品名称">
                <button class="btn bg-green m-lr-10" v-if="$_has('sys:stockList:list:add')" @click="goodsSearch">搜索
                </button>
                <button class="btn btn-danger" @click="reset">重置</button>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->

        <!-- /.box-footer -->
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">数据列表</h3>
            <!--<button v-if="$_has('sys:stockList:in')" type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#modal-default"-->
            <!--@click="exportInfo">-->
            <!--导入-->
            <!--</button>-->
            <!--<button v-if="$_has('sys:stockList:out')" type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#modal-default"-->
            <!--@click="exportInfo">-->
            <!--导出-->
            <!--</button>-->
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example1" class="table table-bordered table-hover box">
              <div class="overlay" v-if="show">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <thead>
              <tr>
                <!--<th>-->
                <!--<label>-->
                <!--<input type="checkbox" v-model='checked' @click='checkedAll'>-->
                <!--</label>-->
                <!--</th>-->
                <th style="width: 10%;">商品图片</th>
                <th>商品信息</th>
                <th>仓库</th>
                <th style="width: 10%">库存总量</th>
                <!--<th>货架号[库位]</th>-->
                <th style="width: 19%">货架位<label for="" class="text-red">（库存）</label></th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="stockList.length == 0">
                <td colspan="5">
                  暂时没有数据
                </td>
              </tr>
              <tr v-else v-for="(stockListItem,index) in stockList" :key="index">
                <!--<td>-->
                <!--<label>-->
                <!--<input type="checkbox" v-model='checkList' @click="checkedItem($event)" :value="stockListItem.id">-->
                <!--</label>-->
                <!--</td>-->
                <td>
                  <div class="imgW">
                    <img v-if="stockListItem.goodsPic" :src="stockListItem.goodsPic" alt="">
                    <img v-else src="@/assets/noPic.png" alt="">
                  </div>
                </td>
                <td class="text-left" style="padding-left: 20px">

                  <p>
                    <label>商品编码：</label>
                    <span>{{stockListItem.sku}}</span>
                  </p>
                  <p>
                    <label>商品名称：</label>
                    <span>{{stockListItem.goodsName}}</span>
                  </p>
                  <p>
                    <label>品牌名称：</label>
                    <span>{{stockListItem.brandName}}</span>
                  </p>
                </td>
                <td>{{stockListItem.whName}}</td>
                <td>{{stockListItem.countStock}}</td>
                <td>
                  <p v-for="stockDetailItem in stockListItem.stockDetail">{{stockDetailItem.stockNo}} <label for=""
                                                                                                             class="text-red">({{stockDetailItem.qty}})</label>
                  </p>
                </td>
              </tr>
              </tbody>
            </table>
            <template class="clearfix" v-if="stockList.length != 0">
              <div class="m-t-15 pull-right">
                <pagination :total="total" :current-page='current' :display="display"
                            @pagechange="pagechange"></pagination>
              </div>
            </template>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

  </section>
</template>

<script>
  import pagination from '@/components/common/pageComponent'
  import instance from '@/api/index.js'

  export default {
    name: "detailedAccount",
    data() {
      return {
        stockList: [],//获取库存清单列表
        total: 0,//数据总条数
        display: 10,   // 每页显示条数DataTable
        current: 1,   // 当前的页数
        show: false,
        checked: false,
        allProductTotal: null,
        checkList: [],
        userPrivilegeStock: [],//获取用户可查看仓库
        whLocationActive: -1,//仓库位置下标
        whLocationInquireCriteria: {},//仓库位置查询条件
      }
    },
    methods: {
      //全选反选
      checkedAll: function () {
        var vm = this;
        if (vm.checked) { //实现反选
          vm.checkList = [];
        } else { //实现全选
          vm.checkList = [];
          vm.stockList.forEach(function (item, index) {
            if (index >= 0) {
              vm.checkList.push(item.id);
            }
          });
        }
      },

      //获取选择每个商品id
      checkedItem: function (e) {
        this.checkList.push(e.target.value);
      },

      // 获取分页
      pagechange: function (currentPage) {
        this.current = currentPage;
        this.getStockList(this.current)
      },

      //获取用户可查看仓库
      userPrivilegeStockFn: function () {
        const vm = this;
        instance.post('/v1/warehouse/getUserWareHouseList').then(function (data) {
          vm.userPrivilegeStock = data.data.data;
          vm.getStockList(vm.current)
        })
      },

      //获取库存清单列表
      getStockList: function (pages) {
        const vm = this;
        this.whLocationInquireCriteria.page = pages;
        this.whLocationInquireCriteria.rows = 20;
        this.display = this.whLocationInquireCriteria.rows;
        console.log(vm.whLocationInquireCriteria)
        instance.post('/v1/warehouse/getStockList', vm.whLocationInquireCriteria).then(function (data) {
          if (data.data.success) {
            vm.stockList = data.data.data.list;
            vm.total = data.data.data.total;
            console.log(data.data.data)
          }
        }).catch(function (error) {
          console.log(error);
        });
      },

      //仓库位置查询
      whLocationInquire: function (id, index) {
        this.whLocationActive = index;
        this.whLocationInquireCriteria.whId = id;
        this.checkList = [];
        this.getStockList(this.current);
      },

      // 商品名称/商品货号查询
      goodsSearch: function () {
        this.getStockList(this.current);
      },

      //重置
      reset: function () {
        delete this.whLocationInquireCriteria.goodsCN;
        this.getStockList(this.current);
      },

      //导入导出
      exportInfo: function () {
        if (this.checkList.length == 0) {
          alert("请选择")
        } else {
          alert("导入导出中...")
        }
      }
    },
    created() {
      //获取用户可查看仓库
      this.userPrivilegeStockFn();
    },
    mounted() {

    },
    components: {
      //分页组件
      pagination,
    },

  }


</script>

<style scoped>
  .imgW {
    width: 120px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }

  .imgW img {
    height: 100%;
  }
</style>
